<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JQuery Filter 4</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				// is()传递选择器, DOM, jquery对象或是函数来匹配元素结合
				$('.red').is('div'); // false
				$('.red').is('li'); // 放入选择器  true
				$('.red').is($('li')); // 放入jQuery对象, 等价于line 11
				$('.red').is($('li').get(0)); // 放入DOM对象, 等价于line 11
				$('.red').is($('li').eq(0));  // 放入jQuery对象, 等价于line 11
				$('.red').is(function(){ // 放入函数, 等价于line 11
					// 一定要使用$(this)
					return $(this).text() == 'Item 1';
				});
				
				// hasClass(className) 元素是否含有指定的class
				$('li').eq(0).hasClass('red'); // 注意此处没有.
				
				// slice(startIndex, endIndex) endIndex不包含
				$('li').slice(0, 2).css('background', '#ccc'); // 截取前两个元素
				// slice(0,-2), 从倒数第三个位置, 向前选定所有; slice(2,-2), 前两个和末尾两个未选定
				
				// end()获取当前元素前一个状态
				$('#u1').find('li').end().get(0); // ul元素
				// 等价于 $('#u1').find('li').parent().get(0);
				
				$('#u1').next('ul').end().css('font-weight', 'bold'); // 返回第一个ul, 此处不可以使用parent();
				
				// contents()获取某元素下面所有元素节点, 包括文本节点, 如果是iframe则可以查找文本内容
				var size = $('div').contents().size();// 2个节点
				
				// filter()将匹配元素集合缩减为匹配指定选择器的元素
				$('li').filter(':even').css('font-size', '25px');
			});	
		</script>
		</head>
	<body>
		<ul id="u1">
			<li class="red">Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
			<li>Item 5</li>
			<li>Item 6</li>
		</ul>
		
		<ul>
			<li>Single Item</li>
		</ul>
		
		<div>
			DIV1
			<p>Hello</p>
		</div>
	</body>
</html>